<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">

    <link href="/static/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="/static/jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/static/jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="/static/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <script type="text/javascript">

        var pageSize = 5;
        var pageNum = 1;
        var pageInfo;

        var name = $.trim($("#search-name").val());
        var owner = $.trim($("#search-owner").val());
        var startDate = $("#search-startDate").val();
        var endDate = $("#search-endDate").val();

        //调用函数自动生成分页相关的页面内容
        function handlePageInfo() {
            $("#b-counts").text(pageInfo.total);
            var firstPageStr = "<li><a href=\"javascript:toFirstPage()\">首页</a></li>\n";
            var prevPageStr = "<li><a href=\"javascript:toPrevPage()\"><<</a></li>";
            var prevTwoStr = "<li><a href=\"javascript:toPage("+(pageNum-2)+")\">"+(pageNum - 2)+"</a></li>\n";
            var prevOneStr = "<li><a href=\"javascript:toPage("+(pageNum-1)+")\">"+(pageNum - 1)+"</a></li>\n";
            var nextOneStr = "<li><a href=\"javascript:toPage("+(pageNum+1)+")\">"+(pageNum + 1)+"</a></li>\n";
            var nextTwoStr = "<li><a href=\"javascript:toPage("+(pageNum+2)+")\">"+ (pageNum + 2) +"</a></li>\n";
            var nextPageStr = "<li><a href=\"javascript:toNextPage()\">>></a></li>\n";
            var lastPageStr = " <li><a href=\"javascript:toLastPage()\">末页</a></li>";
            var currentStr = "<li><a href=\"javascript:toPage("+pageNum+")\">"+'Page'+pageNum+'/'+pageInfo.pages+"</a></li>\n";
            var currentStr2 = "<li><a href=\"javascript:toPage("+pageNum+")\">"+pageNum+"</a></li>\n";

            var htmlStr = "";//用来存放html内容的字符串
            htmlStr += firstPageStr;
            htmlStr += prevPageStr;
            if(pageNum - 2 > 1){
                htmlStr += prevTwoStr;
            }
            if (pageNum - 1 >= 1){
                htmlStr += prevOneStr;
            }
            htmlStr += currentStr2;
            if (pageNum + 1 <= pageInfo.pages){
                htmlStr += nextOneStr;
            }
            if(pageNum + 2 < pageInfo.pages){
                htmlStr += nextTwoStr;
            }
            htmlStr += nextPageStr;
            htmlStr += lastPageStr;
            htmlStr += currentStr;
            $("#pageUl").html(htmlStr);
        }

        //到指定的页
        function toPage(pn) {
            pageNum = pn;
            findByCondition();
        }
        //写分页按钮的点击事件函数
        function toFirstPage() {
            pageNum = 1;
            findByCondition(name,owner,startDate,endDate);
            handlePageInfo();
        }
        function toLastPage() {
            pageNum = pageInfo.pages;
            findByCondition(name,owner,startDate,endDate);
            handlePageInfo();
        }
        function toPrevPage() {
            if (pageNum > 1){
                pageNum -= 1;
            }
            findByCondition(name,owner,startDate,endDate);
            handlePageInfo();
        }
        function toNextPage() {
            if (pageNum < pageInfo.pages){
                pageNum += 1;
            }
            findByCondition(name,owner,startDate,endDate);
            handlePageInfo();
        }


        //将集合中的元素解析为tr标签添加到tBody中
        function handleActivityList(activityList) {
            var htmlStr = "";//用来存放html内容的字符串
            for (let i = 0; i < activityList.length; i++) {
                var activity = activityList[i];//取出每一个activity对象
                htmlStr +=
                    "<tr class=\"active\">\n" +
                    "<td><input type=\"checkbox\" name=\"xz\" value='"+activity.id+"'/></td>\n" +
                    "<td><a style=\"text-decoration: none; cursor: pointer;\" " +
                    "onclick=\"window.location.href='/workbench/activity/detail?id="+activity.id+"';\">"+activity.name+"</a></td>\n" +
                    "<td>"+activity.ownerUser.name+"</td>\n" +
                    "<td>"+activity.startDate+"</td>\n" +
                    "<td>"+activity.endDate+"</td>\n" +
                    "</tr>";
            }
            //将拼接完成的html内容添加到tBody中
            $("#tBody").html(htmlStr);
        }

        //根据条件查询
        function findByCondition(name,owner,startDate,endDate){

            //将全选的复选框的√干掉
            $("#qx").prop("checked",false);

            $.ajax({
                url: "/workbench/activity/findByCondition",
                data: {name:name,owner:owner,startDate:startDate,endDate:endDate,pageNum:pageNum,pageSize:pageSize},
                type: "post",
                dataType: "json",
                success:function (ro) {
                    //表示查询成功
                    if (ro.code === 1){
                        //取出查询出的Activity集合
                        pageInfo = ro.data;
                        var activityList = pageInfo.list;
                        //将集合中的每一个元素解析为tr标签tBody中
                        handleActivityList(activityList);
                        //注意：应该查询结果出来后再自动的生成分页信息
                        handlePageInfo()//调用函数自动生成分页相关的页面内容
                    }else {
                        alert(ro.msg)
                    }
                }
            });
        }

        //使用指定的activity对象为页面填充内容
        function handleEditActivityPage(activity) {
            $("#edit-marketActivityOwner").val(activity.ownerUser.id);
            $("#edit-marketActivityName").val(activity.name);
            $("#edit-startTime").val(activity.startDate);
            $("#edit-endTime").val(activity.endDate);
            $("#edit-cost").val(activity.cost);
            $("#edit-describe").val(activity.description);
        }

        $(function(){
            //初始查询所有的市场活动(这时候条件框都为空)
            findByCondition();

            //获取被点击的pageSize值  赋值给全局变量pageSise  并跟新到显示pageSize的按钮中
            $("#pageSizeUl li").click(function () {
                pageSize = $(this).text();
                $("#btn-pageSize").text(pageSize);
                while (pageNum * pageSize > pageInfo.total){
                    pageNum--;
                }if (pageSize > pageInfo.total){
                    pageNum = 1;
                }
                findByCondition();
                handlePageInfo();
            });

            //时间选择工具
            $("#create-startTime").datetimepicker({
                format:"yyyy-mm-dd",
                language:'zh-CN',
                autoclose:true,
                minView:"month"
            });
            $("#create-endTime").datetimepicker({
                format:"yyyy-mm-dd",
                language:'zh-CN',
                autoclose:true,
                minView:"month"
            });
            $("#search-startDate").datetimepicker({
                format:"yyyy-mm-dd",
                language:'zh-CN',
                autoclose:true,
                minView:"month"
            });
            $("#search-endDate").datetimepicker({
                format:"yyyy-mm-dd",
                language:'zh-CN',
                autoclose:true,
                minView:"month"
            });
            $("#edit-startTime").datetimepicker({
                format:"yyyy-mm-dd",
                language:'zh-CN',
                autoclose:true,
                minView:"month"
            });
            $("#edit-endTime").datetimepicker({
                format:"yyyy-mm-dd",
                language:'zh-CN',
                autoclose:true,
                minView:"month"
            });

            //为创建市场活动的确认按钮添加点击事件
            $("#saveActivity").click(function () {
                let owner = $("#create-marketActivityOwner").val();
                let name = $("#create-marketActivityName").val();
                let startDate = $("#create-startTime").val();
                let endDate = $("#create-endTime").val();
                let cost = $("#create-cost").val();
                let description = $("#create-describe").val();

                if (name === ''){
                    alert("名称不能为空！");
                    return;
                }
                let reg = /^[1-9][0-9]*$/;
                if (!reg.test(cost)){
                    alert("成本只能是正整数！");
                    return;

                }
                $.ajax({
                    url:"/workbench/activity/addActivity",
                    type:"post",
                    data:{owner:owner,name:name,startDate:startDate,endDate:endDate,cost:cost,description:description},
                    dataType:"json",
                    success:function (ro) {
                        if (ro.code === 0){
                            alert(ro.msg);
                        }else {
                            //注意，需要将jquery对象转换为js，不然的话虽然有reset方法但是无效的！
                            $("#activityAddForm").modal("hide");
                            $("#activityAddForm")[0].reset();
                            findByCondition();
                            alert("添加成功!");
                        }
                    }
                });
            });

            //查询按钮的点击事件
            $("#btn-findByCondition").click(function () {
                name = $.trim($("#search-name").val());
                owner = $.trim($("#search-owner").val());
                startDate = $("#search-startDate").val();
                endDate = $("#search-endDate").val();
                findByCondition(name,owner,startDate,endDate);//调用函数进行多条件查询
            });

            //为修改按钮添加点击事件，从后台拿出数据显示到模态窗口
            $("#toUpdate").click(function () {
                //1.判断用户勾选的是否是有且只有一个
                var ids =  $("#tBody input[type='checkbox']:checked");//使用jquery的选择器 找出tBody下面的所有被选中的checkbox
                if(ids.length === 0){
                    alert("必须勾选一个");
                    return;
                }
                if(ids.length > 1){
                    alert("只能勾选一个");
                    return;
                }

                var id = ids[0].value;//获取被勾选的市场活动的id值
                $.ajax({
                    url:"/workbench/activity/findById",
                    data:{id:id},
                    type:"post",
                    dataType:"json",
                    success:function (ro) {
                        if (ro.code === 1){
                            var activity = ro.data;
                            handleEditActivityPage(activity);
                            $("#editActivityModal").modal("show");
                        }else{
                            alert(ro.msg);
                        }
                    }
                });
            });

            //点击更新按钮，实现修改市场活动
            $("#updateBtn").click(function () {
                var ids =  $("#tBody input[type='checkbox']:checked");
                var id = ids[0].value;//获取被勾选的市场活动的id值
                let name = $("#edit-marketActivityName").val();
                let startDate = $("#edit-startTime").val();
                let endDate = $("#edit-endTime").val();
                let cost = $("#edit-cost").val();
                let description = $("#edit-describe").val();

                $.ajax({
                    url:"/workbench/activity/updateActivity",
                    data:{id:id,name:name,startDate:startDate,endDate:endDate,cost:cost,description:description},
                    type:"post",
                    dataType:"json",
                    success:function (ro) {
                        if (ro.code === 1){
                            //注意，需要将jquery对象转换为js，不然的话虽然有reset方法但是无效的！
                            $("#activityEditForm").modal("hide");
                            $("#activityEditForm")[0].reset();
                            findByCondition();
                            handleActivityList();
                            alert("更新成功!");
                        }else {
                            alert(ro.msg);
                        }
                    }
                });
            });



            //为全选的复选框绑定事件，触发全选操作
            $("#qx").click(function () {
                $("input[name=xz]").prop("checked",this.checked);
            });

            /* //动态生成的元素，是不能够以普通绑定事件的形式来进行操作的（例如以下操作是不行的）
               $("input[name=xz]").click(function () {
                   alert(123);
               });*/


            //动态生成的元素，我们要以on方法的形式来触发事件
            //语法：

            $("#tBody").on("click",$("input[name=xz]"),function () {
                //看数据的总行数是否等于总选择数，若等于，上面的全选复选框也打上√；若不相等，则去掉上面之前打过的勾；若之前全选复选框没打√则不影响。
                $("#qx").prop("checked",$("input[name=xz]").length === $("input[name=xz]:checked").length);
            });



            //删除按钮的点击触发事件
            $("#deleteBtn").click(function () {

                var $xz = $("#tBody input[name=xz]:checked");
                if ($xz.length === 0){
                    alert("请选择需要删除的记录！");
                }
                //肯定选了，一条或多条
                else {
                    if (confirm("您确定要删除所选中的记录吗？")){
                        //url: /workbench/activity/deleteActivity?id=xxx&id=xxx&id=xxx
                        //拼接参数
                        var ids = "";

                        //将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
                        for (var i = 0; i < $xz.length ; i++) {
                            // ids += "id=" + $($xz[i]).val();
                            ids += $($xz[i]).val();
                            //如果不是最后一个元素，需要在每一个id后面加一个&符号
                            if (i < $xz.length - 1){
                                ids += ",";
                            }
                        }
                        $.ajax({
                            url:"/workbench/activity/deleteActivity",
                            data:{ids:ids},
                            type:"post",
                            dataType:"json",
                            success:function (ro) {
                                if (ro.code === 1){
                                    findByCondition();
                                    alert("删除成功！");
                                }else {
                                    alert("删除失败！")
                                }
                            }
                        })
                    }
                }
            });

            //为导出所有市场活动按钮添加点击事件
            $("#exportActivityAllBtn").click(function () {
                window.location.href = "/workbench/activity/exportActivityAll";
            });

            //选择导出
            $("#exportActivityXzBtn").click(function () {

                var $xz = $("#tBody input[name=xz]:checked");
                if ($xz.length === 0) {
                    alert("请选择需要导出的记录！");
                }
                //肯定选了，一条或多条
                else {
                    if (confirm("您确定要导出所选中的记录吗？")) {
                        //url: /workbench/activity/exportActivityXz?id=xxx&id=xxx&id=xxx
                        //拼接参数
                        var ids = "";

                        //将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
                        for (var i = 0; i < $xz.length; i++) {
/*                            if (i === 0){
                                ids += $($xz[i]).val();
                                ids += "&";
                            }*/
                            ids += "id=" + $($xz[i]).val();
                            //如果不是最后一个元素，需要在每一个id后面加一个&符号
                            if (i < $xz.length - 1) {
                                ids += "&";
                            }
                        }
                        window.location.href = "/workbench/activity/exportActivityXz?" +ids;
                    }
                }
            });

            //导入市场活动按钮添加点击事件
            $("#importActivityBtn").click(function () {
                //如果使用ajax上传文件 则需要将文件信息封装成formData向后台提交
                var formData = new FormData();
                formData.append("activityFile",$("#activityFile").get(0).files[0]);
                $.ajax({
                    url: "/workbench/activity/importActivity",
                    type: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache:false,
                    dataType:"json",
                    success: function (ro) {
                        if (ro.code === 1){
                            findByCondition();
                            $("#importActivityModal").modal("hide");
                            alert("导入成功！")
                        }else {
                            alert(ro.msg);
                        }
                    }
                });
            });
        });

    </script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form id="activityAddForm" class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner">
                                <c:forEach items="${userList}" var="user">
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group" id="form_datetime">
                        <label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-startTime" autocomplete="off">
                        </div>
                        <label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-endTime" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-describe"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="saveActivity">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form id="activityEditForm" class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">
                                <c:forEach items="${userList}" var="user">
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-startTime" autocomplete="off" value="2020-10-10">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-endTime" autocomplete="off" value="2020-10-20">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost" value="5000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="updateBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="search-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="search-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control" type="text" id="search-startDate" autocomplete="off"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control" type="text" id="search-endDate" autocomplete="off">
                    </div>
                </div>

                <button type="button" class="btn btn-default" id="btn-findByCondition">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createActivityModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
                <button type="button" class="btn btn-default" data-toggle="modal" id="toUpdate"><span class="glyphicon glyphicon-pencil"></span>修改</button>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="qx" /></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="tBody">
<%--                <tr class="active">
                    <c:forEach items="${activityList}" var="activity" varStatus="stu">
                        <tr>
                                <td><input type="checkbox" /></td>
                                <td>${activity.name}</td>
                                <td>${activity.ownerUser.name}</td>
                                <td>${activity.startDate}</td>
                                <td>${activity.endDate}</td>
                        </tr>
                    </c:forEach>
                </tr>--%>
                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <div>
                <button type="button" class="btn btn-default" style="cursor: default;">共<b id="b-counts">50</b>条</button>
            </div>
            <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
                <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
                <div class="btn-group">
                    <button id="btn-pageSize" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        5
                        <span class="caret"></span>
                    </button>
                    <ul id="pageSizeUl" class="dropdown-menu" role="menu">
                        <li><a href="#">5</a></li>
                        <li><a href="#">10</a></li>
                        <li><a href="#">15</a></li>
                    </ul>
                </div>
                <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
            </div>
            <div style="position: relative;top: -88px; left: 285px;">
                <nav>
                    <ul class="pagination" id="pageUl">
<%--                        这些东西全部动态添加--%>
<%--                    <li class="disabled"><a href="javascript:toFirstPage()">首页</a></li>
                        <li class="disabled"><a href="javascript:toPrevPage()">上一页</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="javascript:toNextPage()">下一页</a></li>
                        <li class="disabled"><a href="javascript:toLastPage()">末页</a></li>--%>
                    </ul>
                </nav>
            </div>
        </div>

    </div>

</div>
</body>
</html>
